<template>
    <div class="card-onr-conytainer">
        <div class="users-total">
            <i class="iconfont iconic_column_opening_normal"></i>
            <span>538764</span>
        </div>
        <div class="sex">
           <div>
               <span>Man</span>
               <el-progress :percentage="55" ></el-progress>
           </div>
            <div class="women" style="margin-top:10px;">
               <span>Women</span>
               <el-progress :percentage="85" ></el-progress>
           </div>
        </div>
    </div>
</template>




<style lang="scss" scoped>
.card-onr-conytainer{
    display: flex;
    flex-direction: column;
    margin:50px 0;
    .users-total{
        padding: 0 20px;
        .iconfont{
            font-size: 28px;
            padding: 5px;
            display: inline-block;
            width: 50px;
            height: 50px;
            text-align: center;
            font-weight: bold;
            border-radius: 50%;
            color: #b783f7;
            border: 4px solid #b783f7;
        }
        span{
            font-size: 38px;
            display: inline-block;
            margin-left: 20px;
            position: relative;
            top: 5px;
        }
    }
    .sex{
        margin: 10px 30px;
        .women /deep/ .el-progress-bar__inner{
            background: linear-gradient(to right, #36a2fe , #b783f7);
        }
    }
    .sex /deep/ .el-progress-bar__outer{
        height: 20px !important;
        margin-top: 15px;
    }
    .sex /deep/ .el-progress-bar__inner{
        background: linear-gradient(to right, #42acfd , #3eead0);
    }
}
</style>
